M

MLOG

فارسی

قدرت Tailwind CSS peer variants را برای استایل دهی عناصر هم سطح بر اساس وضعیت یک عنصر دیگر آزاد کنید. این راهنمای جامع مثال‌ها و موارد استفاده عملی را برای ایجاد رابط‌های کاربری پویا و واکنش‌گرا ارائه می‌کند.

Tailwind CSS Peer Variants: مسلط شدن بر استایل دهی عناصر هم سطح

Tailwind CSS با ارائه یک رویکرد utility-first که فرآیند استایل‌دهی را تسریع می‌کند، انقلابی در توسعه فرانت‌اند ایجاد کرده است. در حالی که ویژگی‌های اصلی Tailwind قدرتمند هستند، peer variants آن سطح پیشرفته‌ای از کنترل بر استایل‌دهی عناصر را بر اساس وضعیت همتایان خود ارائه می‌دهند. این راهنما به پیچیدگی‌های peer variants می‌پردازد و نحوه استفاده مؤثر از آن‌ها برای ایجاد رابط‌های کاربری پویا و تعاملی را نشان می‌دهد.

درک Peer Variants

Peer variants به شما این امکان را می‌دهند که یک عنصر را بر اساس وضعیت (به عنوان مثال، hover، focus، checked) یک عنصر هم سطح استایل دهید. این کار با استفاده از کلاس peer در Tailwind همراه با سایر انواع مبتنی بر وضعیت مانند peer-hover، peer-focus و peer-checked انجام می‌شود. این انواع از ترکیب‌کننده‌های هم سطح CSS برای هدف قرار دادن و استایل دادن به عناصر مرتبط استفاده می‌کنند.

اساساً، کلاس peer به عنوان یک نشانگر عمل می‌کند و به انواع مبتنی بر peer بعدی اجازه می‌دهد تا عناصر هم سطحی را که عنصر علامت‌گذاری‌شده را در درخت DOM دنبال می‌کنند، هدف قرار دهند.

مفاهیم کلیدی

نحو و کاربرد اولیه

نحو اولیه برای استفاده از peer variants شامل اعمال کلاس peer به عنصر محرک و سپس استفاده از انواع peer-* روی عنصر هدف است.

مثال: استایل دادن به یک پاراگراف زمانی که یک چک باکس انتخاب شده است


<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer" />
  <span>فعال کردن حالت تاریک</span>
</label>
<p class="hidden peer-checked:block text-gray-700">
  حالت تاریک اکنون فعال شده است.
</p>

در این مثال، کلاس peer به عنصر <input type="checkbox"/> اعمال می‌شود. عنصر پاراگراف، که هم سطح چک باکس است، دارای کلاس peer-checked:block است. این بدان معناست که وقتی چک باکس انتخاب می‌شود، نمایش پاراگراف از hidden به block تغییر می‌کند.

مثال‌های عملی و موارد استفاده

Peer variants طیف گسترده‌ای از امکانات را برای ایجاد اجزای رابط کاربری پویا و تعاملی باز می‌کنند. در اینجا چند مثال عملی آورده شده است که تطبیق پذیری آنها را نشان می دهد:

1. برچسب‌های فرم تعاملی

با برجسته کردن بصری برچسب‌های فرم زمانی که فیلدهای ورودی مربوطه در حالت focus هستند، تجربه کاربری را بهبود بخشید.


<div>
  <label for="name" class="block text-gray-700 font-bold mb-2 peer-focus:text-blue-500 transition-colors duration-200">
    نام:
  </label>
  <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline peer" />
</div>

در این مثال، کلاس peer به فیلد ورودی اعمال می‌شود. وقتی فیلد ورودی در حالت focus قرار دارد، کلاس peer-focus:text-blue-500 روی برچسب رنگ متن برچسب را به آبی تغییر می‌دهد و یک نشانه بصری برای کاربر ارائه می‌کند.

2. آکاردئون/بخش های جمع شدنی

بخش‌های آکاردئونی ایجاد کنید که در آن کلیک کردن روی یک هدر، محتوای زیر آن را گسترش یا جمع می‌کند.


<div>
  <button class="w-full text-left py-2 px-4 bg-gray-100 hover:bg-gray-200 focus:outline-none peer">
    عنوان بخش
  </button>
  <div class="hidden peer-focus:block bg-white py-2 px-4">
    <p>محتوای بخش.</p>
  </div>
</div>

در اینجا، کلاس peer به دکمه اعمال می‌شود. div محتوا دارای کلاس های hidden peer-focus:block است. اگرچه این مثال از حالت 'focus' استفاده می کند، اما توجه به این نکته مهم است که ویژگی های ARIA مناسب (به عنوان مثال، `aria-expanded`) و JavaScript ممکن است برای دسترسی و عملکرد پیشرفته در یک پیاده سازی آکاردئون در دنیای واقعی مورد نیاز باشد. سازگاری ناوبری صفحه کلید و صفحه خوان را در نظر بگیرید.

3. استایل دهی لیست پویا

موارد لیست را با استفاده از peer variants در حالت hover یا focus برجسته کنید.


<ul>
  <li>
    <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:outline-none peer">آیتم 1</a>
    <span class="hidden peer-hover:inline peer-focus:inline text-gray-500 ml-2">(جزئیات)</span>
  </li>
  <li>
    <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:outline-none peer">آیتم 2</a>
    <span class="hidden peer-hover:inline peer-focus:inline text-gray-500 ml-2">(جزئیات)</span>
  </li>
</ul>

در این مورد، کلاس peer به تگ anchor در هر مورد لیست اعمال می‌شود. وقتی تگ anchor hover یا focus شود، عنصر span مجاور نمایش داده می شود و جزئیات بیشتری ارائه می دهد.

4. استایل دهی بر اساس اعتبار ورودی

بر اساس اعتبار ورودی خود در فیلدهای فرم، بازخورد بصری به کاربران ارائه دهید.


<div>
  <label for="email" class="block text-gray-700 font-bold mb-2">ایمیل:</label>
  <input type="email" id="email" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline peer" />
  <p class="hidden peer-invalid:block text-red-500 text-sm mt-1">لطفاً یک آدرس ایمیل معتبر وارد کنید.</p>
</div>

در اینجا، ما از شبه کلاس :invalid (به طور بومی توسط مرورگرها پشتیبانی می شود) و نوع peer-invalid استفاده می کنیم. اگر ورودی ایمیل نامعتبر باشد، پیام خطا نمایش داده می شود.

5. دکمه های رادیویی و چک باکس های سفارشی

با استفاده از peer variants برای استایل دهی اندیکاتورهای سفارشی، دکمه های رادیویی و چک باکس های بصری جذاب و تعاملی ایجاد کنید.


<label class="inline-flex items-center">
  <input type="radio" class="form-radio h-5 w-5 text-blue-600 peer" name="radio" value="option1" />
  <span class="ml-2 text-gray-700 peer-checked:text-blue-600">گزینه 1</span>
  <span class="ml-2 hidden peer-checked:inline-block w-5 h-5 rounded-full bg-blue-600"></span>
</label>

در این مثال، از نوع peer-checked برای استایل دهی متن برچسب و یک نشانگر سفارشی (span رنگی) هنگام انتخاب دکمه رادیویی استفاده می شود.

تکنیک ها و ملاحظات پیشرفته

ترکیب Peer Variants با سایر Variants

Peer variants را می توان با سایر Tailwind variants مانند hover، focus و active ترکیب کرد تا تعاملات پیچیده تر و دقیق تری ایجاد کرد.


<button class="peer bg-gray-200 hover:bg-gray-300 focus:outline-none focus:bg-gray-300"
        >
  Hover me
</button>
<p class="hidden peer-hover:block peer-focus:block">این در هنگام hover یا focus نشان داده می شود</p>

این مثال هنگامی که دکمه hover یا focus شود، پاراگراف را نشان می دهد.

استفاده از ترکیب کننده های هم سطح عمومی (~)

در حالی که ترکیب کننده هم سطح مجاور (+) رایج تر است، ترکیب کننده هم سطح عمومی (~) می تواند در سناریوهای خاصی مفید باشد که عنصر هدف بلافاصله در مجاورت عنصر peer نیست.

مثال: استایل دادن به تمام پاراگراف های بعدی بعد از یک چک باکس.


<input type="checkbox" class="peer" />
<p>پاراگراف 1</p>
<p class="peer-checked:text-green-500">پاراگراف 2</p>
<p class="peer-checked:text-green-500">پاراگراف 3</p>

در این مثال، هنگامی که چک باکس انتخاب می شود، رنگ متن تمام پاراگراف های بعدی به سبز تغییر می کند.

ملاحظات دسترسی

هنگام استفاده از peer variants، توجه به دسترسی بسیار مهم است. اطمینان حاصل کنید که تعاملاتی که ایجاد می کنید برای افراد دارای معلولیت قابل استفاده و قابل درک هستند. این شامل:

ملاحظات عملکرد

در حالی که peer variants راهی قدرتمند برای استایل دادن به عناصر هم سطح ارائه می دهند، توجه به عملکرد ضروری است. استفاده بیش از حد از peer variants، به خصوص با استایل های پیچیده یا تعداد زیادی از عناصر، می تواند به طور بالقوه بر عملکرد صفحه تأثیر بگذارد. استراتژی های بهینه سازی زیر را در نظر بگیرید:

عیب یابی مشکلات رایج

در اینجا برخی از مشکلات رایجی که ممکن است هنگام کار با peer variants با آن مواجه شوید و نحوه عیب یابی آنها آورده شده است:

جایگزین های Peer Variants

در حالی که peer variants یک ابزار قدرتمند هستند، رویکردهای جایگزینی وجود دارند که می توانند در برخی موارد استفاده شوند. این جایگزین ها بسته به الزامات خاص پروژه شما ممکن است مناسب تر باشند.

نتیجه گیری

Tailwind CSS peer variants راهی قدرتمند و ظریف برای استایل دادن به عناصر هم سطح بر اساس وضعیت یک عنصر دیگر ارائه می دهند. با تسلط بر peer variants، می توانید رابط های کاربری پویا و تعاملی ایجاد کنید که تجربه کاربری را بهبود می بخشد. به یاد داشته باشید که هنگام استفاده از peer variants، دسترسی و عملکرد را در نظر بگیرید و در صورت لزوم رویکردهای جایگزین را بررسی کنید. با درک کامل از peer variants، می توانید مهارت های Tailwind CSS خود را به سطح بعدی ببرید و برنامه های وب واقعا استثنایی بسازید.

این راهنما یک نمای کلی جامع از peer variants ارائه داده است، که همه چیز را از نحو اولیه گرفته تا تکنیک ها و ملاحظات پیشرفته پوشش می دهد. مثال های ارائه شده را آزمایش کنید و امکانات بسیاری را که peer variants ارائه می دهند، بررسی کنید. استایل دهی خوبی داشته باشید!